<template>
  <el-dialog
    title="版本信息"
    :visible.sync="open"
    width="30%"
    :show-close="true"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false">
    <div class="main">
      <div class="img-logo">
        <img :src="logoImg" alt="" />
      </div>
      <div class="title">
        <h4>{{ info.systemName }}</h4>
        <p>{{ info.version }}</p>
      </div>
      <div class="copyright">
        <span>{{ info.copyRight }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getProductConfig } from '@/api/system/versionInfo'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      open: false,
      info: {},
      logoImg: '',
    }
  },
  computed: {
    ...mapState({
      sideTheme: (state) => state.settings.sideTheme,
    }),
  },
  methods: {
    show() {
      this.open = true
      this.getProductConfigData()
      let logoImgInfo = JSON.parse(sessionStorage.getItem('logoImgInfo'))
      let logoImgName = this.sideTheme == 'theme-light' ? logoImgInfo?.blue?.sysImg : logoImgInfo?.white?.sysImg
      this.logoImg = logoImgInfo.imagePath + logoImgName
    },
    getProductConfigData() {
      getProductConfig().then((res) => {
        this.info = res
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: auto !important;
}
::v-deep .el-dialog__body {
  height: auto !important;
}
.dark-theme ~ .el-dialog__wrapper .el-dialog__body .main .title h4,
.dark-theme ~ .el-dialog__wrapper .el-dialog__body .main .copyright span {
  color: rgba(255, 255, 255, 0.8) !important;
}
.main {
  text-align: center;
  .img-logo {
    margin-bottom: 30px;
    img {
      width: 15%;
    }
  }
  .title {
    h4 {
      font-size: 22px;
      margin: 10px;
      font-weight: bold;
      color: #111;
    }
    p {
      color: #4b6eef;
    }
  }
  .copyright {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-content: space-between;
    span {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      margin: 0 5px;
    }
  }
}
</style>
